<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图书列表</title>
		<link rel="stylesheet" href="layui/css/layui.css" />
	</head>
	<body>
		<h1 style="text-align: center;color: #1e9fff;margin-bottom: 20px;">图书列表</h1>
		
		<form class="layui-form layui-row layui-col-space5">
		  <div class="layui-col-md2">
		    <div class="layui-input-wrap">
		      <input type="text" name="bookName"  placeholder="图书名称" class="layui-input" lay-affix="clear">
		    </div>
		  </div>
		  <div class="layui-col-md2">
		    <div class="layui-input-wrap">
		      <div id="cId" class="xm-select-demo"></div>
		    </div>
		  </div>
		  <div class="layui-col-md2">
		    <div class="layui-input-wrap">
		      <select name="status">
				  <option value="">是否上架</option>
				  <option value="0">下架</option>
				  <option value="1">上架</option>
		      </select>
		    </div>
		  </div>
		  <div class="layui-col-md3">
		    <div class="layui-input-wrap">
		      <input type="text" class="layui-input" name="time" id="ID-laydate-range-datetime" placeholder="请选择时间范围">
		    </div>
		  </div>
		  <div class="layui-col-md2">
		    <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
		    <button type="reset" id="reset" class="layui-btn layui-btn-primary">清空</button>
		  </div>
		</form>
		<!-- 根据后端数据生成数据表格 -->
		<table class="layui-hide" id="test" lay-filter="test"></table>
		
		
		<script src="layui/layui.js"></script>
		<script src="js/xm-select.js"></script>
		<script>
			
			layui.use(function(){
				
				//获取table组件的对象
				let table = layui.table;
				let $ = layui.$;
				let layer = layui.layer;
				let laydate = layui.laydate;
				let form = layui.form;
				
				//搜索
				form.on('submit(search)', function(data){
				    let field = data.field; // 获得表单字段
					let time = field.time;
					if(time && time.length>0){
						let times = time.split("-");
						console.log(times);
						if(times && times.length==2){
							field.start=times[0].trim();
							field.end=times[1].trim();
						}
					}
				    // 执行搜索重载
				    table.reload('test', {
				      page: {
				        curr: 1 // 重新从第 1 页开始
				      },
				      where: field // 搜索的字段
				    });
				    return false; // 阻止默认 form 跳转
				});
				
				
				//获取分类列表
				$.getJSON("http://127.0.0.1:8080/getCategoryList",function(d){
					console.log(d);
					if(d.code==0){
						
						//sm-select下拉框
						var demo1 = xmSelect.render({
							el: '#cId', 
							prop: {
								name: 'categoryName',
								value: 'categoryId',
							},
							name: 'categoryId',
							filterable: true,
							radio: true,
							theme: {
								color: '#0081ff',
							},
							data: d.data
						})
						
						//绑定清空事件
						$("#reset").click(function(){
							demo1.setValue([ ])
						});
						
					}else{
						layer.msg(d.msg)
					}
				});
				
				
				
				
				//时间范围
				laydate.render({
				    elem: '#ID-laydate-range-datetime',
				    type: 'datetime',
					format:'yyyy/MM/dd HH:mm:ss',
				    range: true
				});
				
				
				//头部工具栏事件
				table.on('toolbar(test)',function(obj){
					console.log("顶部工具栏事件被触发了....",obj)
					
					let event = obj.event;
					
					if(event=='addBook'){
						//添加事件
						layer.open({
							title:"添加图书",
							type: 2,
							content:"book-add.html",
							area:['500px','600px'],
							closeBtn:1,
							end: function(){
							    //刷新表格
								table.reload("test")
							}
						});
						
						
						
					}else if(event=='batchDel'){
						//批量删除事件
						let id = obj.config.id;
						let checkStatus = table.checkStatus(id);
						//选中图书的列表
						let list = checkStatus.data;
						
						if(list && list.length==0){
							layer.msg("没有选择要删除的数据");
						}else{
							layer.confirm('确认是否删除',{btn:['确定','取消']},function(index){
								
								//构建参数
								let arr=[];
								
								for(let i=0;i<list.length;i++){
									arr.push(list[i].bookId);
								}
								//AJAX
								$.ajax({
									type:"post",
									url:"http://127.0.0.1:8080/batchDeleteBook",
									data:JSON.stringify(arr),
									contentType: 'application/json',
									dataType:"json",
									success:function(d){
										if(d.code==0){
											//重新加载数据表格数据
											table.reload("test")
										}else{
											layer.msg(d.msg);
										}
									}
								});
								//关闭弹出层
								layer.close(index);
							});
						}
						
						
						
					}
					
				});
				
				//单元格事件处理
				table.on('tool(test)',function(obj){
					console.log(obj);
					let event = obj.event;
					if(event=='del'){
						layer.confirm('确定删除?',{btn:['确定','取消']},function(index){
							//点击确定
							//删除
							let bookId = obj.data.bookId;
							//AJAX调用
							$.getJSON("http://127.0.0.1:8080/deleteBook",{bookId:bookId},function(d){
								if(d.code===0){
									//删除成功,表格数据刷新
									table.reload("test")
								}else{
									layer.msg(d.msg);
								}
							});
							//关闭提示框
							layer.close(index);
						});
					}else if(event=='edit'){
						//更新
						
						layer.open({
							title:"更新图书",
							type: 2,
							content:"book-edit.html?status="+obj.data.status+"&categoryId="+obj.data.categoryId,
							area:['500px','600px'],
							closeBtn:1,
							end: function(){
							    //刷新表格
								table.reload("test")
							},
							success: function(layero, index, that){
							   //获取弹出层的JQuery对象
							   let body = layer.getChildFrame('body', index);
							   // 给 iframe 页中的某个输入框赋值
							   body.find('#bookId').val(obj.data.bookId);
							   body.find('#bookName').val(obj.data.bookName);
							   body.find('#authorName').val(obj.data.authorName);
							   body.find('#price').val(obj.data.price);
							   body.find('#picId')[0].src="http://127.0.0.1:8080"+obj.data.bookUrl
							   body.find('#createTime').val(obj.data.createTime);
							   body.find('#bookAddress').val(obj.data.bookAddress);
							   body.find('#bookUrl').val(obj.data.bookUrl);
							}
						});
						
						
					}
				});
				
				
				//调用对象中的函数进行表格生成
				table.render({
					elem:"#test",
					url:"http://127.0.0.1:8080/getBooksPage",
					page: {
						limit:5,
						limits:[5,10,15,20],
						prev:"上一页",
						next:"下一页",
						groups:10,
						theme:"#1e9fff"
					},
					request: {
					  pageName: 'pageNo',
					  limitName: 'pageSize'
					},
					parseData: function(res){
						//console.log(res)
						return {
							"code": res.code, // 解析接口状态
							"msg": res.msg, // 解析提示文本
							"count": res.data.total, // 解析数据长度
							"data": res.data.page // 解析数据列表
						}
					},
					toolbar:`
						<div>
							<button type="button" lay-event="batchDel" class="layui-btn layui-btn-sm layui-bg-red">批量删除</button>
							<button type="button" lay-event="addBook" class="layui-btn layui-btn-sm layui-bg-blue">添加</button>
						</div>
					`,
					cols:[[
						{type: 'checkbox', fixed: 'left'},
						{
							title:"图书编号",
							field:"bookId"
						},
						{
							title:"图书名称",
							field:"bookName"
						},
						{
							title:"图书封面",
							templet:function(d){
								return "<img src='http://127.0.0.1:8080"+d.bookUrl+"'>";
							}
						},
						{
							title:"图书作者",
							field:"authorName"
						},
						{
							title:"图书分类",
							templet:function(d){
								return d.category.categoryName;
							}
						},
						{
							title:"图书价格",
							field:"price",
							sort:true
						},
						{
							title:"是否上架",
							templet:function(d){
								return d.status==0?'<span class="layui-badge layui-bg-green">下架</span>':'<span class="layui-badge">上架</span>'
							}
						},
						{
							title:"创建时间",
							field:"createTime"
						},
						{
							title:"操作",
							templet:function(d){
								let s='<button type="button" lay-event="edit" class="layui-btn layui-btn-xs layui-btn-normal">更新</button>'
								s+='<button type="button" lay-event="del" class="layui-btn layui-btn-xs layui-bg-red">删除</button>';
								return s;
							}
						}
					]]
				});
				
				
			});
			
		</script>
	</body>
</html>